<template>
  <div>
    <div class="goodsreturnBill-mokuai">
      <!-- 第一部分 -->
      <div class="goodsreturnBill-index">
        <div class="goodsreturnBill-name">
          <div class="goodsreturnBill-name-font">
            <i class="el-icon-s-unfold"></i>
            退货商品
          </div>
          <div class="goodsreturnBill-index-select">
            <div class="float-left goodsreturnBill-index-select-button">
              <el-button icon="el-icon-arrow-left" @click.native="returnButton" size="small">返回</el-button>
            </div>
          </div>
        </div>
        <div class="goodsreturnBill-content">
          <!-- 退货商品 -->
          <div>
            <el-table :data="tableData1" border style="width: 100%">
              <el-table-column prop="orderItem.image" label="商品图片" width="170" align="center">
                <template scope="scope">
                  <img :src="scope.row.skuVo.image" width="70" height="50" class="head_pic" />
                </template>
              </el-table-column>
              <el-table-column
                prop="orderItem.title"
                label="商品名称"
                width="180"
                align="center"
              >{{orderItem.title}}</el-table-column>
              <el-table-column
                prop="orderItem.price"
                label="价格/货号"
                align="center"
              >{{orderItem.parse}}</el-table-column>
              <el-table-column
                prop="skuVo.spec"
                label="属性"
                width="170"
                align="center"
              >
              <div v-for="item in skuVo.spec" :key="item+'ns'">
                <span v-for="items in item" :key="items+'hh'">
                  {{items}} </span>
              </div>
              </el-table-column>
              <el-table-column
                prop="orderItem.num"
                label="数量"
                width="150"
                align="center"
              >{{orderItem.num}}</el-table-column>
              <el-table-column
                prop="orderItem.money"
                label="小计"
                width="150"
                align="center"
              >{{orderItem.money}}</el-table-column>
            </el-table>
          </div>
          <div class="goosreturnBill-subtotal">
            合计:￥
            <span class="color-red">{{orderItem.money}}</span>
          </div>
        </div>
      </div>
      <!-- 第二部分 -->
      <div class="goodsreturnBill-index">
        <div class="goodsreturnBill-name">
          <div class="goodsreturnBill-name-font">
            <i class="el-icon-s-unfold"></i>
            服务单信息
          </div>
        </div>
        <div class="goodsreturnBill-content" :data="tableData1">
          <el-main class="info-main">
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >服务单号</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="returnOrder.id"
                >{{returnOrder.id}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >申请状态</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  prop="status"
                  v-text="returnOrder.status"
                >{{returnOrder.status}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >订单编号</div>
              </el-col>
              <el-col :span="19">
                <div class="goodsreturnBill-grid-content goodsreturnBill-bg-purple">
                  {{returnOrder.orderId}}
                  <el-button type="text" size="small">查看</el-button>
                </div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >申请时间</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="returnOrder.applyTime"
                >{{returnOrder.applyTime}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >用户账号</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="returnOrder.userAccount"
                >{{returnOrder.userAccount}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >联系人</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="returnOrder.linkman"
                >{{returnOrder.linkman}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >联系电话</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="returnOrder.linkmanMobile"
                >{{returnOrder.linkmanMobile}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >退货原因</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="returnOrder.returnCause"
                >{{returnOrder.returnCause}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >问题描述</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="returnOrder.description"
                >{{returnOrder.description}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color col-height"
                >凭证照片</div>
              </el-col>
              <el-col :span="19">
                <div class="goodsreturnBill-grid-content goodsreturnBill-bg-purple col-height">
                  <div class="block goodsreturnBill-img-array" v-for="fit in fits" :key="fit">
                    <el-image
                      style="width: 80px; height: 80px"
                      :src="returnOrder.evidence"
                      :fit="fit.fill"
                    ></el-image>
                  </div>
                </div>
              </el-col>
            </el-col>
          </el-main>

          <!-- 第二个框 -->
          <el-main class="info-main">
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >订单金额</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="orderItem.money"
                >{{orderItem.money}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >退运费</div>
              </el-col>
              <el-col :span="19">
                <div class="goodsreturnBill-grid-content goodsreturnBill-bg-purple">
                  <template>
                    <el-radio v-model="returnOrder.isReturnFreight" :label="1">是</el-radio>
                    <el-radio v-model="returnOrder.isReturnFreight" :label="2">否</el-radio>
                  </template>
                </div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >确认退款金额</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="orderItem.payMoney"
                >{{orderItem.payMoney}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >选择收货点</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="address.receiving"
                >{{address.receiving}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >收货人姓名</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="address.consignee"
                >{{address.consignee}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >所在区域</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="address.area"
                >{{address.area}}</div>
              </el-col>
            </el-col>

            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >详细地址</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="address.address"
                >{{address.address}}</div>
              </el-col>
            </el-col>
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >联系电话</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="address.telephone"
                >{{address.telephone}}</div>
              </el-col>
            </el-col>
          </el-main>

          <!-- 第三个框 -->
          <el-main class="info-main">
            <el-col type="flex" class="row-bg">
              <el-col :span="4">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple goodsreturnBill-bg-color"
                >处理备注</div>
              </el-col>
              <el-col :span="19">
                <div
                  class="goodsreturnBill-grid-content goodsreturnBill-bg-purple"
                  v-text="returnOrder.remark"
                >{{returnOrder.remark}}</div>
              </el-col>
            </el-col>
          </el-main>

          <!-- 按钮 -->
          <div class="goodsreturnBill-form-button">
            <div>
              <el-button type="success" @click="ramma">确认退货</el-button>
              <el-button type="danger" @click="rammb">拒绝退货</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style>
/* 自定义 */

.goodsreturnBill-selectWidth {
  width: 150px;
}
.col-height {
  height: 104px;
  line-height: 104px !important;
}
.float-left {
  float: left;
}
.goodsreturnBill-img-array {
  margin-top: 10px;
  float: left;
  margin-left: 20px;
}
.goodsreturnBill-grid-content {
  min-height: 36px;
  line-height: 36px;
  text-align: left;
  font-size: 14px;
  padding-left: 50px;
  color: #666666;
}
.goodsreturnBill-bg-purple {
  border: 1px solid #e4e4e4;
}
.goodsreturnBill-bg-color {
  background-color: #f9fafc;
}
.color-red {
  color: red;
}
.goodsreturnBill-mokuai {
  height: 1300px;
  background-color: rgb(249, 249, 249);
  padding-top: 30px;
}
.goodsreturnBill-index {
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);
}
.goodsreturnBill-name {
  width: 100%;
  height: 40px;
  background-color: rgb(240, 240, 240);
}
.goodsreturnBill-name-font {
  height: 40px;
  line-height: 40px;
  margin-left: 20px;
  font-size: 14px;
  float: left;
}
.goodsreturnBill-index-select {
  width: 80px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodsreturnBill-index-select-button {
  margin-right: 20px;
}
.goodsreturnBill-content {
  width: 100%;
}
.goosreturnBill-subtotal {
  width: 95%;
  height: 50px;
  line-height: 50px;
  text-align: right;
}
.goodsreturnBill-form-button {
  width: 100%;
  height: 80px;
  padding-top: 20px;
  text-align: center;
}
</style>

<script>
import reorderItemApi from "@/api/order/reorderItemlist";
import reorderApi from "@/api/order/reorderlist";
import request from "@/utils/request";
export default {
  data() {
    return {
      //  图片
      fits: ["fill"],

      ids: [],

      // 列表数据
      tableData1: [],
      skuVo: {
        image: "",
        spec: ""
      },
      address: {
        receiving: "",
        consignee: "",
        area: "",
        address: "",
        telephone: ""
      },
      orderItem: {
        title: "",
        num: "",
        price: "",
        money: "",
        payMoney: ""
      },
      returnOrder: {
        id: "",
        status: "",
        orderId: "",
        applyTime: "",
        userAccount: "",
        linkman: "",
        linkmanMobile: "",
        returnCause: "",
        description: "",
        isReturnFreight: "",
        evidence: "",
        remark: ""
      }
    };
  },
  mounted() {
    var ids = parseInt(this.$route.query.id);
    this.returnOrder.id = ids;

    var orderId = parseInt(this.$route.query.orderId);
    this.returnOrder.orderId = orderId;

    // this.intdataOne(ids);
    this.intdataTwo(ids);
  },
  methods: {
    intdataTwo(ids) {
      this.ids[0] = ids;
      reorderItemApi.getFindGoods(ids).then(response => {
        var data = JSON.parse(JSON.stringify(response.data.data));
        this.tableData1 = data[0].list;
        this.returnOrder.status = data[0].returnOrder.status;
        if (this.returnOrder.status == 0) {
          this.returnOrder.status = "待处理";
        } else if (this.returnOrder.status == 1) {
          this.returnOrder.status = "退货中";
        } else if (this.returnOrder.status == 2) {
          this.returnOrder.status = "已完成";
        } else if (this.returnOrder.status == 3) {
          this.returnOrder.status = "已拒绝";
        }
        this.returnOrder.applyTime = data[0].returnOrder.applyTime;
        this.returnOrder.userAccount = data[0].returnOrder.userAccount;
        this.returnOrder.linkman = data[0].returnOrder.linkman;
        this.returnOrder.linkmanMobile = data[0].returnOrder.linkmanMobile;
        this.returnOrder.returnCause = data[0].returnOrder.returnCause;
        if (this.returnOrder.returnCause == 0) {
          this.returnOrder.returnCause = "质量问题";
        } else if (this.returnOrder.returnCause == 1) {
          this.returnOrder.returnCause = "屏幕问题";
        } else if (this.returnOrder.returnCause == 2) {
          this.returnOrder.returnCause = "通信问题";
        } else if (this.returnOrder.returnCause == 3) {
          this.returnOrder.returnCause = "电池问题";
        }
        this.returnOrder.description = data[0].returnOrder.description;
        this.returnOrder.evidence = data[0].returnOrder.evidence;
        this.orderItem.money = data[0].list[0].money;
        this.returnOrder.isReturnFreight = data[0].returnOrder.isReturnFreight;
        this.orderItem.payMoney = data[0].list[0].payMoney;
        this.address.receiving = data[0].returnOrderAddress.receiving;
        this.address.consignee = data[0].returnOrderAddress.consignee;
        this.address.area = data[0].returnOrderAddress.area;
        this.address.address = data[0].returnOrderAddress.address;
        this.address.telephone = data[0].returnOrderAddress.telephone;
        this.returnOrder.remark = data[0].returnOrder.remark;
        this.skuVo.image = data[0].list[0].skuVo.image;
        this.orderItem.title = data[0].list[0].title;
        this.skuVo.spec = JSON.parse(data[0].list[0].skuVo.spec);
        this.orderItem.num = data[0].list[0].num;
        this.orderItem.parse = data[0].list[0].price;
      });
    },

    //点击确认后修改状态
    ramma(ids) {
      this.$confirm("是否确认退货" + "提示", {
        type: "warning"
      }).then(() => {
        reorderApi.getUpdateStatus(this.ids).then(response => {
          const resp1 = response.data;
          if (resp1.code == 200) {
            this.$router.replace({ path: "/order/goodReturn" });
          } else {
            this.$message({
              message: "这个为已完成",
              type: "warning"
            });
          }
        });
      });
    },

    //点击确认后修改状态2
    rammb(ids) {
      this.$confirm("是否拒绝退货" + "提示", {
        type: "warning"
      }).then(() => {
        reorderApi.getUpdateStatusTwo(this.ids).then(response => {
          const resp = response.data;
          if (resp.code == 200) {
            this.$router.replace({ path: "/order/goodReturn" });
          } else {
            this.$message({
              message: "这个为已拒绝",
              type: "warning"
            });
          }
        });
      });
    },

    // 返回
    returnButton() {
      this.$router.replace({ path: "/order/goodReturn" });
    }
  }
};
</script>